<template>
  <div class="history-reOrundo">
    <a-tooltip title="快捷键提示">
      <a-button
        shape="circle"
        class="history-reOrundo__btn"
        @click="openKeyTips"
      >
        <template #icon>
          <question-outlined />
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="撤销">
      <a-button
        shape="circle"
        class="history-reOrundo__btn"
        @click="undoHandle"
        :disabled="editorStore.undoDisabled"
      >
        <template #icon>
          <UndoOutlined />
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="重做">
      <a-button
        shape="circle"
        class="history-reOrundo__btn"
        @click="redoHandle"
        :disabled="editorStore.redoDisabled"
      >
        <template #icon>
          <RedoOutlined />
        </template>
      </a-button>
    </a-tooltip>
    <a-modal
      v-model:open="visible"
      title="快捷键操作"
      :footer="false"
      :style="{ width: '400px' }"
    >
      <div class="hotKeysOptions">
        <div class="hotKeysItem">
          <span class="desc">复制</span>
          <span class="key">Ctrl + C / Command + C</span>
        </div>
        <div class="hotKeysItem">
          <span class="desc">黏贴</span>
          <span class="key">Ctrl + V / Command + V</span>
        </div>
        <div class="hotKeysItem">
          <span class="desc">撤销</span>
          <span class="key">Ctrl + Z / Command + Z</span>
        </div>
        <div class="hotKeysItem">
          <span class="desc">重做</span>
          <span class="key">Ctrl + Y / Command + Shift + Z</span>
        </div>
        <div class="hotKeysItem">
          <span class="desc">删除图层</span>
          <span class="key">Delete</span>
        </div>
        <div class="hotKeysItem">
          <span class="desc">取消选中</span>
          <span class="key">ESC</span>
        </div>
        <div class="hotKeysItem">
          <span class="desc">上下左右移动 1 像素</span>
          <span class="key">
            <ArrowUpOutlined />
            <ArrowDownOutlined />
            <ArrowLeftOutlined />
            <ArrowRightOutlined />
          </span>
        </div>
        <div class="hotKeysItem">
          <span class="desc">上下左右移动 10 像素</span>
          <span class="key">
            Shift +
            <ArrowUpOutlined />
            <ArrowDownOutlined />
            <ArrowLeftOutlined />
            <ArrowRightOutlined />
          </span>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  QuestionOutlined,
  RedoOutlined,
  UndoOutlined,
  ArrowDownOutlined,
  ArrowUpOutlined,
  ArrowLeftOutlined,
  ArrowRightOutlined,
} from '@ant-design/icons-vue'
import useEditorStore from '@/store/modules/editorStore'
defineOptions({
  name: 'HistoryReOrUndo',
})
const editorStore = useEditorStore()
const visible = ref(false)
const undoHandle = () => {
  editorStore.undo()
}
const redoHandle = () => {
  editorStore.redo()
}
const openKeyTips = () => {
  visible.value = true
}
</script>

<style scoped lang="scss">
.history-reOrundo {
  .history-reOrundo__btn {
    margin: 0px 3px;
  }
}
.hotKeysOptions {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-top: 1px solid #ccc;
  .hotKeysItem {
    display: flex;
    margin-top: 10px;
    box-sizing: border-box;
    justify-content: space-between;
    .desc {
      font-size: 14px;
      color: #888;
    }
    .key {
      font-size: 14px;
      color: #409eff;
    }
  }
}
</style>
